<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="金西振">
    <title></title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <header>个税计算器</header>
        <form action="#">
            <input type="text" id="jishu" required autocomplete="off" v-model="jishu" placeholder="基本工资">
            <input type="text" id="jixiao" required autocomplete="off" v-model="jixiao" placeholder="绩效">
            <input type="text" id="jiangjin" required autocomplete="off" v-model="jiangjin" placeholder="奖金">
            <button v-on:click="calc">计&#x3000;算</button>
        </form>
        <section>
            <dl>
                <dt>工资总额</dt>
                <dd id="zonge">{{zonge}}</dd>
                <div class="clear hr"></div>
            </dl>
            <dl class="text-red">
                <dt>养老 8%</dt>
                <dd id="yanglao">{{yanglao}}</dd>
                <div class="clear"></div>
            </dl>
            <dl class="text-red">
                <dt>医疗 2%</dt>
                <dd id="yiliao">{{yiliao}}</dd>
                <div class="clear"></div>
            </dl>
            <dl class="text-red">
                <dt>失业 0.5%</dt>
                <dd id="shiye">{{shiye}}</dd>
                <div class="clear"></div>
            </dl>
            <dl class="text-red">
                <dt>工伤 0%</dt>
                <dd id="gongshang">0.00</dd>
                <div class="clear"></div>
            </dl>
            <dl class="text-red">
                <dt>生育 0%</dt>
                <dd id="shengyu">0.00</dd>
                <div class="clear"></div>
            </dl>
            <dl class="text-red">
                <dt>公积金</dt>
                <dd id="gongjijin">{{gongjijin}}</dd>
                <div class="clear hr"></div>
            </dl>
            <dl>
                <dt>计税工资</dt>
                <dd id="jishui">{{jishui}}</dd>
                <div class="clear hr"></div>
            </dl>
            <dl class="text-red">
                <dt>个人所得税</dt>
                <dd id="shui">{{shui}}</dd>
                <div class="clear hr"></div>
            </dl>
            <dl>
                <dt>实发工资</dt>
                <dd id="shifa">{{shifa}}</dd>
                <div class="clear"></div>
            </dl>
        </section>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            jishu: '',
            jixiao: '',
            jiangjin: '',
            zonge: 0,
            yanglao: '0.00',
            yiliao: '0.00',
            shiye: '0.00',
            gongjijin: '0.00',
            jishui: '0.00',
            shui: '0.00',
            shifa: '0.00'
        },
        methods: {
            calc() {
                // 获取表单、按扭、计算结果区域等标签
                var form = document.getElementsByTagName('form')[0];
                var button = document.getElementsByTagName('button')[0];
                var section = document.getElementsByTagName('section')[0];

                // 监听事件
                form.addEventListener('input', hide);
                // button.addEventListener('click', calc);
                hide()
                // 隐藏计算结果区域
                function hide() {
                    section.style.display = 'none';
                }

                var jishu = document.getElementById('jishu').value;
                var jixiao = document.getElementById('jixiao').value;
                var jiangjin = document.getElementById('jiangjin').value;



                this.jishu = parseFloat(jishu);
                this.jixiao = parseFloat(jixiao);
                this.jiangjin = parseFloat(jiangjin);

                if (isNaN(this.jishu + this.jixiao + this.jiangjin)) return;

                if (this.jishu + this.jixiao + this.jiangjin < 2000) {
                    alert('您的工资低于最低工资标准！回家涨涨工资再来吧😄');
                    return;
                }

                this.zonge = this.jishu + this.jixiao + this.jiangjin;

                var jizhun = 0;
                if (zonge > 7662) { jizhun = 7662; }
                else { jizhun = this.zonge; }

                this.yanglao = jizhun * 0.08;
                this.yiliao = jizhun * 0.02;
                this.shiye = jizhun * 0.005;
                this.gongjijin = jizhun * 0.05;

                this.jishui = this.zonge - this.yanglao - this.yiliao - this.shiye - this.gongjijin;

                var shuiji = this.jishui - 3500;
                this.shui = 0;

                // 计算个人所得税
                if (shuiji <= 0) { this.shui = 0; alert('不需要缴税，好高兴啊！看看能发多少工资吧😊') }
                else if (shuiji <= 1500) { this.shui = shuiji * 0.03; }
                else if (shuiji <= 4500) { this.shui = shuiji * 0.1 - 105; }
                else if (shuiji <= 9000) { this.shui = shuiji * 0.2 - 555; }
                else if (shuiji <= 35000) { this.shui = shuiji * 0.25 - 1005; }
                else if (shuiji <= 55000) { this.shui = shuiji * 0.3 - 2755; }
                else if (shuiji <= 80000) { this.shui = shuiji * 0.35 - 5505; }
                else { this.shui = shuiji * 0.45 - 13505; }

                this.shifa='$ '+(this.jishui - this.shui).toFixed(2);
           
                section.style.display = 'block';
             }
        }
    });

    var section = document.getElementsByTagName('section')[0];
    hide()
    // 隐藏计算结果区域
    function hide() {
        section.style.display = 'none';
    }

</script>